<template>
    <div>
         <div class="serveBox">
            <div class="top">
              在线客服
            </div>
            <div class="mainTop">
                <img src="../assets/imgs/s1.png" alt="" v-show="imgFlag" class="img1">
           
                <img src="../assets/imgs/s2.png" alt="" v-show="img2Flag" class="img2">
            </div>
            <div class="bop">
              <i class="el-icon-folder" title="选择文件"></i>
              <i class="el-icon-service" title="联系客服" @click="imgFlag = !imgFlag"></i>
              <el-button>清空</el-button>
              <el-button type="primary" @click="img2Flag =!img2Flag">发送</el-button>
           </div>    
            <div class="mainBop">
                  <textarea name="" id="" cols="139" rows="10"></textarea>
            </div>        
         </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imgFlag:false,
      img2Flag:false,
    }
  },
}
</script>

<style lang="scss" scoped>


    .serveBox{
      width: 1000px;
      height: 817px;
    
      margin-left:300px ;
      display: flex;
      flex-direction: column;
      box-shadow: 10px 10px 5px #888;
     
      .top{
        width: 100%;
        height: 50px;
        text-align: center;
        color: rgb(178, 156, 249);
        line-height:50px ;
        font-size:30px ;
        background-color: rgb(220, 219, 219);

        
        
      }
      .mainTop{
        width: 100%;
        height: 550px;
        background: rgb(243, 243, 243);
        position: relative;
        .img1{
          position: absolute;
          left: 15px;
          top: 20px;
        }
        .img2{
          position: absolute;
          right: 15px;
          top: 60px;
        }
     
        
      }

      .bop{
        width: 100%;
        height: 50px;
        background: rgb(210, 210, 210);
        display: flex;
        font-size:30px ;
        justify-content: space-between;
        
        i{
          margin-left:50px ;
          margin-top:8px ;
        }
        
      }

      .mainBop{
        width: 100%;
        flex: 1;
        background: rgb(228, 228, 228);
      }

    }
</style>